/*
  一款基于vue代码高亮插件：vue-codemirror
  基本用法：https://npm.taobao.org/package/vue-codemirror
  官方网站：https://codemirror.net/doc/manual.html
*/
<template>
  <div id="code-hightlight-con">
    <g-banner title="代码高亮" des="使用vue-codemirror组件，用于计算机行业代码高亮显示，功能强大，使用方便"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">代码高亮</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div style="margin-bottom: 10px">
        <div class="pull-left">
          <span>代码高亮模式：</span>
          <el-radio label="text/javascript" v-model="cmOptions.mode">javascript</el-radio>
          <el-radio label="text/yaml" v-model="cmOptions.mode">yaml</el-radio>
          <el-radio label="null" v-model="cmOptions.mode">纯文本</el-radio>
        </div>
        <div class="pull-right">
          <span>高亮主题：</span>
          <el-radio label="eclipse" v-model="cmOptions.theme">白天主题</el-radio>
          <el-radio label="abcdef" v-model="cmOptions.theme">夜间主题</el-radio>
        </div>
        <div class="clearfix"></div>
      </div>
      <codemirror v-model="code" :options="cmOptions"></codemirror>
    </div>
    <div class="g-title-con">
      <h2 class="g-main-title">只读代码框</h2>
    </div>
    <div class="g-box">
      <div style="margin-bottom: 10px">
        <div class="pull-left">
          <span>代码高亮模式：</span>
          <el-radio label="text/javascript" v-model="cmOptions2.mode">javascript</el-radio>
          <el-radio label="text/yaml" v-model="cmOptions2.mode">yaml</el-radio>
          <el-radio label="null" v-model="cmOptions2.mode">纯文本</el-radio>
        </div>
        <div class="pull-right">
          <span>高亮主题：</span>
          <el-radio label="eclipse" v-model="cmOptions2.theme">白天主题</el-radio>
          <el-radio label="abcdef" v-model="cmOptions2.theme">夜间主题</el-radio>
        </div>
        <div class="clearfix"></div>
      </div>
      <codemirror v-model="code" :options="cmOptions2"></codemirror>
    </div>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 引入相关资源
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/yaml/yaml.js'
import 'codemirror/theme/abcdef.css'
import 'codemirror/theme/eclipse.css'
import { codeJs } from '../test-data'
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      // 输入的代码
      code: codeJs,
      // 插件配置项
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'eclipse',
        lineNumbers: true,
        line: true,
      },
      cmOptions2: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'eclipse',
        lineNumbers: true,
        line: true,
        readOnly: 'nocursor'
      }
    } 
  },
  // 注册组件
  components: {
    codemirror,
  },
  methods: {
    getScrollingCon
  },
}
</script>
<style lang="scss" scoped>
// 自定义样式
/deep/ .CodeMirror {
  font-family: 'Courier New';
  line-height: 20px;
}
</style>